<template>
  <t-dialog v-model:visible="visible" header="选择项目" width="80%" :confirm-on-enter="true">
    <div style="overflow: auto">
      <t-card title="项目">
        <div style="display: flex">
          <t-form label-align="right" layout="inline" label-width="80px">
            <t-row :gutter="12">
              <t-col :span="6" class="form_col">
                <t-form-item label="项目名称" name="project_name" class="form_item">
                  <t-input v-model="formData.project_name" placeholder="请输入项目名称" />
                </t-form-item>
              </t-col>

              <t-col :span="6" class="form_col">
                <t-form-item label="项目编号" name="project_no" class="form_item">
                  <t-input v-model="formData.project_no" placeholder="请输入项目编号" />
                </t-form-item>
              </t-col>
            </t-row>
          </t-form>

          <t-space align="end" style="align-self: flex-end">
            <t-button theme="warning" @click="clickQuery">查询</t-button>
          </t-space>
        </div>
      </t-card>

      <div>
        <t-table
          style="height: 350px"
          row-key="FMATERIALID"
          :data="dataList"
          :columns="columns"
          :resizable="true"
          :loading="loading"
          :selected-row-keys="selectedRowKeys"
          :active-row-type="single"
          :select-on-row-click="false"
          :stripe="stripe"
          bordered
          :hover="true"
          table-layout="auto"
          size="small"
          :pagination="pagination"
          cell-empty-content="-"
          resizable
          lazy-load
          @row-click="handleRowClick"
          @row-dblclick="dbClick"
          @select-change="rehandleSelectChange"
        >
        </t-table>
      </div>
    </div>
  </t-dialog>
</template>
<script>
import { ref, onMounted, reactive, computed } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { queryRealProjectList } from '@/service/realProject';
import columns from './columns/index';

export default {
  props: ['filterObj'],
  setup(props, { emit }) {
    const visible = ref(false);
    const dataList = ref([]);
    const selectGroupId = ref();
    const formData = reactive({});
    const total = ref(300);
    const loading = ref(false);
    const selectedRowKeys = ref([]);

    const curr_page = ref(1);
    const page_size = ref(10);

    const pagination = computed(() => {
      return {
        defaultCurrent: 1,
        defaultPageSize: page_size.value,
        total: total.value,
        onChange: (pageInfo) => {
          const { current, pageSize } = pageInfo;
          curr_page.value = current;
          page_size.value = pageSize;
          loadData();
        },
      };
    });

    const clickQuery = () => {
      curr_page.value = 1;
      loadData();
    };

    const loadData = async () => {
      dataList.value = [];
      loading.value = true;
      const filterObj = props.filterObj || {};
      const res = await queryRealProjectList({
        ...formData,
        curr_page: curr_page.value,
        page_size: page_size.value,
        ...filterObj,
      });
      dataList.value = res.dataList;
      // total.value = res.length;
      total.value = res.total;
      console.log('res', res);
      loading.value = false;
    };

    const rehandleSelectChange = (value, { selectedRowData }) => {
      selectedRowKeys.value = value;
      console.log(value, selectedRowData);
    };

    const openGroupDialog = () => {
      visible.value = true;
      loadData();
    };
    // const onConfirmAnother = () => {
    //   if (!selectedRowKeys.value[0]) {
    //     MessagePlugin.error('未选择物料！');
    //     return;
    //   }
    //   selectmater(selectedRowKeys.value[0]);
    // };

    const selectmater = async (FMATERIALID) => {
      // const res = await queryMaterial({ FMATERIALID });
      // if (res.data) {
      //   emit('onConfirm', res.data);
      //   visible.value = false;
      // } else {
      //   MessagePlugin.error('物料不存在！');
      // }
      // emit('onConfirm', res.data);
    };

    const onGroupActive = (val) => {
      selectGroupId.value = val[0];
      // console.log('selectGroupId.val:',selectGroupId.val);
    };
    const handleRowClick = (e) => {
      console.log(e);
    };

    onMounted(() => {
      // loadData();
    });

    const dbClick = ({ row, index }) => {
      visible.value = false;
      emit('onConfirm', row);
    };

    return {
      handleRowClick,
      visible,
      onGroupActive,
      formData,
      dataList,
      selectGroupId,
      openGroupDialog,
      curr_page,
      loadData,
      page_size,
      pagination,
      loading,
      total,
      columns,
      selectedRowKeys,
      rehandleSelectChange,
      dbClick,
      clickQuery,
    };
  },
};
</script>
<style scoped>
>>> .t-tree .t-is-active {
  background-color: dodgerblue;
  color: white;
}
</style>
